<template>
	<!-- 保养模板筛选框 -->
	<!-- 单选日期组件 -->
	<view class="dateFilter">
		<view class="title">
			{{ title }}
			<text>(单选)</text>
		</view>
		<view class="filterContent">
			<view class="top">
				<view :class="['tagItem', actValue == item.value ? 'act' : '']" v-for="(item, index) in dateList" :key="index" @click="chooseDate(item, index)">
					{{ item.name }}
				</view>
			</view>
			<view class="bottom">
				<view :class="['customInput', 'tagItem', startTime ? 'act' : '']" @click="chooseCustomer">
					<input type="text" v-model="startTime" placeholder="开始时间" disabled />
				</view>
				<view class="line">-</view>
				<view :class="['customInput', 'tagItem', endTime ? 'act' : '']" @click="chooseCustomer">
					<input type="text" v-model="endTime" placeholder="结束时间" disabled />
				</view>
			</view>
		</view>

		<!-- 自定义弹出框 -->
		<time-select :defTime="[startTime, endTime]" v-if="selectTimePopup" :atterToday="true" :beforeToday="true" 
		:isChooseToday="true"
		@close="closeSelectTimePopup"></time-select>
	</view>
</template>

<script>
import { elevatorType, contentTemp } from '@/apis/maintains.js';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime, getBeforeDate } from '@/utils/utils.js';
export default {
	components: {
		timeSelect
	},
	props: {
		title: {
			type: String,
			default: '完成时间'
		},
		dateList:{
			type:Array,
			default:()=>{
				return [{ name: '近7天', value: 7 }, { name: '近30天', value: 30 }, { name: '近60天', value: 60 }];
			}
		},
		dateObj:{
			type:Object
		},
		isResetDate:{
			type:Boolean
		}
	},
	data() {
		return {
			actValue: '',
			startTime: '',
			endTime: '',
			selectTimePopup: false
		};
	},
	
	created() {},
	methods: {
		// 初始化日期组件
		initDate(res) {
			// console.log(res,'日期组件获取的值');
			this.actValue = res.value;
			if (!res.value) {
				 this.startTime = res.startTime;
				 this.endTime = res.endTime;
			 } else {
				 this.startTime = '';
				 this.endTime = '';
			 }
		},
		chooseDate(e, i) {
			// console.log(e);
			// 如果再次选择自己置空
			if (e.value == this.actValue) {
				this.actValue = '';
				this.$emit('getDate', {startTime:'',endTime:''});
			} else {
				this.actValue = e.value;
				this.startTime = this.endTime = '';
				this.$emit('getDate', this.tranformDate());
			}
		},
		tranformDate() {
			let obj = {};
			// 如果是自定义日期,直接返回
			if (!this.actValue) {
				obj = { startTime:this.startTime, endTime:this.endTime,value:'' };
			} else {
				 obj = {
					startTime:getBeforeDate(this.actValue),
					endTime: getBeforeDate(1),
					value:this.actValue
				};
			}
			// console.log(obj,"返回的日期数");
			return obj;
		},
		// 点击自定义日期
		chooseCustomer() {
			this.selectTimePopup = true;
		},
		// 自定义日期确定
		closeSelectTimePopup(res) {
			if (res) {
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				// if (endtime >= nowtime) {
				// 	console.log('包含今天');
				// 	uni.showToast({
				// 		title: '自定义日期范围须小于今天',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				this.startTime = start;
				this.endTime = end;
				this.actValue = '';
				this.$emit('getDate', this.tranformDate());
			} else {
			}
			this.selectTimePopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.dateFilter {
	// padding: 30rpx;
	margin-top: 30rpx;
	padding: 20rpx 30rpx;
	.title {
		color: #333;
		font-size: 30rpx;
		font-weight: 600;
		text {
			color: #999;
			font-size: 28rpx;
			font-weight: normal;
		}
	}
	.filterContent {
		.tagItem {
			// width: 208rpx;
			flex: 1;
			height: 48rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			text-align: center;
			line-height: 48rpx;
			// margin-bottom: 20rpx;
			color: #666;
			font-size: 28rpx;
			padding: 0 4rpx;
			overflow: hidden; /*文本超出隐藏*/
			text-overflow: ellipsis; /*文本超出显示省略号*/
			white-space: nowrap;
			// margin-right: 20rpx;
		}
		.act {
			color: #0091ff;
			background-color: #fff;
			border-color: #0091ff;
		}
		.top {
			display: flex;
			justify-content: space-between;
			margin: 16rpx 0;
			view:nth-child(2){
				margin: 0 20rpx;
			}
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			.customInput {
				flex: 1;
				margin-right: 0;
				input {
					width: 100%;
					height: 100%;
				}
			}
			.line {
				width: 68rpx;
				display: flex;
				justify-content: center;
				color: #999;
				align-items: center;
			}
		}
	}
	.main {
		display: flex;
	}
	.left {
		background: #f6f6f6;
		.leftItem {
			width: 232rpx;
			// height: 80rpx;
			padding: 20rpx 46rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			background: #f6f6f6;
			font-size: 28rpx;
			color: #666;
			position: relative;
		}
		.redDot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #e02020;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.right {
		background-color: #fff;
		width: calc(100% - 232rpx);
		padding-left: 30rpx;
		.rightContent {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
		}
		.tagItem {
			width: 208rpx;
			height: 48rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			text-align: center;
			line-height: 48rpx;
			margin-bottom: 20rpx;
			color: #666;
			font-size: 28rpx;
			padding: 0 4rpx;
			overflow: hidden; /*文本超出隐藏*/
			text-overflow: ellipsis; /*文本超出显示省略号*/
			white-space: nowrap;
		}
		.tagItem:nth-child(2){
			margin: 0 20rpx;
		}
		.tagItem:nth-child(odd) {
			// margin-right: 20rpx;
		}
		.activeTage {
			border-color: #0091ff;
			color: #0091ff;
		}
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
